<script lang="ts" setup>
import { type ThemeName, useTheme } from "@/hooks/useTheme"
import { Sunny, Moon} from "@element-plus/icons-vue"

const { themeList, activeThemeName, setTheme } = useTheme()

const handleSetTheme = (name: ThemeName) => {
  setTheme(name)
}
</script>

<template>
  <el-switch
      v-model="activeThemeName"
      class="mb-2"
      inline-prompt
      @change="handleSetTheme"
      style="--el-switch-on-color: #f0f0f0; --el-switch-off-color: #2c2c2c"
      :active-icon="Sunny"
      :inactive-icon="Moon"
      active-value="bright"
      inactive-value="dark"
  />
</template>